<template>
	<view class="movie-detail-page">
		<view class="header">
			<view class="title">{{ details.nm }}</view>
		</view>
		<view class="poster-container">
			<img :src="details.img" class="movie-poster" />
		</view>
		<view class="detail-content">
			<view class="info-item">
				<text class="label">类别：</text>
				<text class="value">{{ details.cat }}</text>
			</view>
			<view class="info-item">
				<text class="label">导演：</text>
				<text class="value">{{ details.dir }}</text>
			</view>
			<view class="info-item">
				<text class="label" style="width:192px;">简介：</text>
				<text class="value">{{ details.dra }}</text>
			</view>
			<view class="info-item">
				<text class="label">上映时间：</text>
				<text class="value">{{ details.pubDesc }}</text>
			</view>
			<view class="info-item">
				<text class="label">评分：</text>
				<text class="value">{{ details.sc }}</text>
			</view>
			<view class="info-item">
				<text class="label">想看人数：</text>
				<text class="value">{{ details.snum }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	import {
		onLoad
	} from "@dcloudio/uni-app"

	const details = ref({});
	const bg = ref("");
	onLoad((data) => {
		getDetails(data.movieId)
	})


	// 获取当前页面栈实例
	const pages = getCurrentPages();
	// 当前页面实例
	const currentPage = pages[pages.length - 1];
	// 当前页面的路由参数
	const options = currentPage.options;

	async function getDetails(movieId) {
		try {
			let res = await uni.$get("https://m.maoyan.com/ajax/detailmovie", {
				movieId: movieId
			});
			console.log(res);
			details.value = res.detailMovie;
			console.log(details.value);
			// 设计导航栏背景色
			// uni.setNavigationBarColor({
			// 	frontColor: "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
			// 	backgroundColor: details.value.backgroundColor // 导航栏背景颜色
			// });
			// 获取页面背景色
			// bg.value = details.value.backgroundColor;
			// 设计导航栏标题
			// uni.setNavigationBarTitle({
			// 	title: details.value.nm
			// });
		} catch (error) {
			console.error("Error fetching movie details:", error);
		}
	}

	function goBack() {
		uni.navigateBack();
	}
</script>

<style lang="scss">
	.movie-detail-page {
		padding: 10px;

	}

	.header {
		text-align: center;
		margin: 8px;
	}

	.back-btn {
		padding: 5px;
		background-color: transparent;
		border: none;
	}

	.iconfont {
		font-size: 24px;
		color: #666;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		margin-left: 10px;
	}

	.poster-container {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.movie-poster {
		width: 200px;
		height: auto;
		border-radius: 8px;
	}

	.detail-content {
		border-top: 1px solid #ccc;
		padding-top: 10px;
	}

	.info-item {
		display: flex;
		margin-bottom: 5px;
	}

	.label {
		font-size: 14px;
		color: #666;
	}

	.value {
		margin-left: 5px;
		font-size: 14px;
		color: #333;
	}
</style>